<template>
  <div class="app-container">
    <!-- 添加或修改租赁合同对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body v-drag-fullscreen>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="form-flex">
        <el-row :gutter="20">

          <el-col :span="12" :xs="24">
            <el-form-item label="出租房源" prop="resourceId">
              <treeselect
                :disabled="disabled"
                v-model="form.resourceId"
                :options="orgOptions"
                :show-count="true"
                :disable-branch-nodes="true"
                placeholder="选择出租房源"
              >
                <div slot="value-label"  slot-scope="{ node }">{{ node.nestedSearchLabel }}</div>
              </treeselect>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="合同类型" prop="contractCategoryId">
              <contract-category-filterable
                v-model="form.contractCategoryId"
                ref="contractRefs"
                :disabled="disabled"
                @cv="selectContractCategory"
              />
            </el-form-item>
          </el-col>
          <fieldset>
            <legend>合同信息</legend>
            <el-col :span="8" :xs="24">
              <el-form-item label="合同开始日期" prop="beginTime">
                <el-date-picker clearable size="small" :disabled="disabled"
                                v-model="form.beginTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择合同开始日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="合同结束日期" prop="finishTime">
                <el-date-picker clearable size="small" :disabled="disabled"
                                v-model="form.finishTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择合同结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="租赁期限" prop="allottedTime">
                <el-input-number v-model="form.allottedTime"  :min="1"  label="请输入租赁期限" :disabled="disabled"/>         月
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="出租面积" prop="leaseArea">
                <el-input-number v-model="form.leaseArea"  :min="0"  label="请输入出租面积" :disabled="disabled"/>           m²
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="签署日期" prop="signTime">
                <el-date-picker clearable size="small" :disabled="disabled"
                                v-model="form.signTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择签署日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="经营业态" prop="businessStatus" v-if="this.form.customType=='002'">
                <el-select v-model="form.businessStatus" placeholder="请选择经营业态" :disabled="disabled">
                  <el-option
                    v-for="item in dict.business_status"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="经营品牌" prop="businessBrand" v-if="this.form.customType=='002'">
                <el-input v-model="form.businessBrand" placeholder="请输入经营品牌" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="24" :xs="24">
              <el-form-item label="经营范围" prop="businessScope" v-if="this.form.customType=='002'">
                <el-input v-model="form.businessScope" type="textarea" placeholder="请输入内容" :disabled="disabled"/>
              </el-form-item>
            </el-col>
          </fieldset>

          <el-tabs type="border-card" v-model="activeName" style="width: 100%">
            <el-tab-pane label="保证金" name="bzj">
              <el-col :span="8" :xs="24">
                <el-form-item label="收费项目" prop="chargeId">
                  <el-select v-model="form.chargeId" placeholder="请选择收费项目" disabled>
                    <el-option
                      v-for="item in itemOptions"
                      :key="item.chargeId"
                      :label="item.chargeName"
                      :value="item.chargeId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="保证金金额" prop="chargeMoneys">
                  <el-input-number v-model="form.chargeMoneys" :disabled="disabled"  :min="0" :precision="2"  label="描述文字"></el-input-number>
                </el-form-item>
              </el-col>
            </el-tab-pane>

            <el-tab-pane label="租金" name="zj">
              <el-col :span="8" :xs="24">
                <el-form-item label="收费标准" prop="roomNormId">
                  <el-select v-model="form.roomNormId" placeholder="请选择收费标准" :disabled="disabled">
                    <el-option
                      v-for="item in normOptions"
                      :key="item.normId"
                      :label="item.normNames"
                      :value="item.normId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="费用标准" prop="roomNormMoney">
                  <el-input-number v-model="form.roomNormMoney" :precision="2" :step="0.5":disabled="disabled" :min="0">
                  </el-input-number>元   /月
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="计费周期" prop="chargingCycle">
                  <el-select v-model="form.chargingCycle" placeholder="请选择计费周期" :disabled="disabled">
                    <el-option
                      v-for="item in dict.payment_rules"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="生成规则" prop="markerRule">
                  <el-select v-model="form.markerRule" placeholder="请选择生成规则" :disabled="disabled">
                    <el-option
                      v-for="item in dict.charge_generate_type"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="收款日期" prop="chargeTime">
                  <el-date-picker clearable size="small" :disabled="disabled"
                                  v-model="form.chargeTime"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择收款日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-tab-pane>
          </el-tabs>
          <fieldset style="margin-top: 10px">
            <legend>退租确认</legend>
          <el-col :span="8" :xs="24">
            <el-form-item label="确认人" prop="expiryPerson">
              <el-input v-model="form.expiryPerson" placeholder="请输入确认人" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="退租时间" prop="expiryTime">
              <el-date-picker clearable size="small"
                              v-model="form.expiryTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择退租时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24">
            <el-form-item label="退租原因" prop="expiryCause">
              <el-input v-model="form.expiryCause"  type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          </fieldset>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getLeaseContract, expriyLease} from "@/api/lease/leaseContract";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { getFirstParty } from "@/api/lease/firstParty";
  import { contractMixin } from "./contractMixin";
  import { listFirstParty} from "@/api/lease/firstParty";
  import FileUploads from "@/components/common/FileUpload/index"
  import {listItem} from "@/api/payfee/item";
  import {listNorm} from "@/api/payfee/norm";
  export default {
    name: "expiryForm",
    dicts: ['business_status', 'brand_level ', ' lease_contract_status','custom_type',  'payment_rules',  'charge_generate_type',   ],
    components:{ Treeselect,FileUploads },
    mixins:[ contractMixin ],
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //是否禁用
        disabled: true,
        customInfoOptions:[],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          expiryPerson: [
            {required: true, message: "确认人不能为空", trigger: "blur"}
          ],
          expiryTime: [
            {required: true, message: "确认时间不能为空", trigger: "blur"}
          ],
        },
        type:null,
        firstPartyOptions:[],
        itemOptions:[],
        normOptions:[],
        activeName: 'bzj'
      };
    },
    created() {
      listFirstParty({'contractCategoryId':this.form.contractCategoryId,'whereDefault':'Y'}).then(res=>{
        this.firstPartyOptions = res.rows;
      });
      listItem().then(res=>{
        this.itemOptions=res.rows;
      });
      listNorm({'projectId':"05"}).then(response=>{
        this.normOptions =response.rows;
      })
    },
    watch:{

    },
    methods: {
      show(option) {
        this.reset();
        getLeaseContract(option.id).then(response => {
          this.form = response.data;
          this.$set(this.form, "expiryPerson", this.$store.state.user.nickName)
          this.$set(this.form, "expiryTime", this.parseTime(new Date()))
          this.open = true;
          this.title='终止租赁合同';
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          expiryPerson: null,
          expiryTime: null,
          expiryCause: null,
        };
        this.resetForm("form");
      },
      clickPartyId(v){
        getFirstParty(v).then(res=>{
          this.form.partyContacts = res.data.partyContacts;
          this.form.partyPhone = res.data.partyPhone;
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            expriyLease(this.form).then(response => {
              this.msgSuccess("退租成功");
              this.cancel()
            });
          }
        });
      }
    }
  };
</script>
